<template>
  <div class="home">
   <el-card>
     <div class="card-top">
       <el-radio-group v-model="dateValue" >
         <el-radio-button label="年" />
         <el-radio-button label="月" />
         <el-radio-button label="日" />
       </el-radio-group>
     </div>
     <div class="card-content">
        <el-row :gutter="10" v-for="(userList,userListIndex) in showUserList" :key="userListIndex">
          <el-col :span="8" v-for="(item,index) in userList" :key="item.userId">
            <div :class="['user-item', index < 2 ? 'border' : '']">
              <div class="user-left">
                <div class="user-index" v-if="getRankImage(item.rankId).type === 'number'">{{ item.rankId }}</div>
                <el-image style="width: 40px;height: 40px;margin-right: 15px" v-if="getRankImage(item.rankId).type === 'img'" :src="getRankImage(item.rankId).value"></el-image>
                <div class="user-avatar">
                  <el-avatar :size="50" :src="item.headImg || defaultAvatar" />
                </div>
                <div class="user-info">
                  <div class="user-name">{{ item.nickname }}</div>
                  <div class="user-depart">{{ item.department }}</div>
                </div>
              </div>
              <div class="user-time">{{ item.time }}</div>
            </div>
          </el-col>
        </el-row>
     </div>
   </el-card>
  </div>
</template>

<script setup>
import {computed, ref} from 'vue'
const dateValue = ref('年')
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
const getRankImage = (value) => {
  if (value === 1) return {
    type: 'img',
    value: require('@/assets/排名1.png')
  }
  if (value === 2) return {
    type: 'img',
    value: require('@/assets/排名2.png')
  }
  if (value === 3) return {
    type: 'img',
    value: require('@/assets/排名3.png')
  }
  return {
    type: 'number',
    value: value
  }
}
const userList = ref([
  {
    rankId:1,
    "userId": "1734750749382508545",
    "nickname": "姓名",
    "headImg": "",
    "time": "学习时长（小时）",
    "department" : "部门"
  },
  {
    rankId:4,
    "userId": "1735223919617081346",
    "nickname": "李四",
    "headImg": "http://192.168.10.7:9000/dev/public/ec0072de0b3b4ae39a813cf295628cc1.jpg",
    "time": 5.3,
    "department" : "部门2"
  },
  {
    rankId:7,
    "userId": "1735224004648206337",
    "nickname": "aaa",
    "headImg": "http://192.168.10.7:9000/dev/public/39d796132f23439ebe6e9664e467b0a6.jpg",
    "time": 1.5,
    "department" : "部门3"
  },
  {
    rankId:2,
    "userId": "1734750749382508545",
    "nickname": "姓名",
    "headImg": "",
    "time": "学习时长（小时）",
    "department" : "部门"
  },
  {
    rankId:5,
    "userId": "1735223919617081346",
    "nickname": "李四",
    "headImg": "http://192.168.10.7:9000/dev/public/ec0072de0b3b4ae39a813cf295628cc1.jpg",
    "time": 5.3,
    "department" : "部门2"
  },
  {
    rankId:8,
    "userId": "1735224004648206337",
    "nickname": "aaa",
    "headImg": "http://192.168.10.7:9000/dev/public/39d796132f23439ebe6e9664e467b0a6.jpg",
    "time": 1.5,
    "department" : "部门3"
  },
  {
    rankId:3,
    "userId": "1734750749382508545",
    "nickname": "姓名",
    "headImg": "",
    "time": "学习时长（小时）",
    "department" : "部门"
  },
  {
    rankId:6,
    "userId": "1735223919617081346",
    "nickname": "李四",
    "headImg": "http://192.168.10.7:9000/dev/public/ec0072de0b3b4ae39a813cf295628cc1.jpg",
    "time": 5.3,
    "department" : "部门2"
  },
  {
    rankId:9,
    "userId": "1735224004648206337",
    "nickname": "aaa",
    "headImg": "http://192.168.10.7:9000/dev/public/39d796132f23439ebe6e9664e467b0a6.jpg",
    "time": 1.5,
    "department" : "部门3"
  }
])
const showUserList = computed(() => {
  let arr = []
  while (userList.value.length > 0) {
    arr.push(userList.value.splice(0, 3))
  }
  return arr
})
</script>
<style>
* {
  box-sizing: border-box;
}
.card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.user-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 20px;
  position: relative;
}
.user-item.border ::after{
  display: inline-block;
  content: ' ';
  position: absolute;
  width: 1px;
  height: 50%;
  background-color: #c0c4cc;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.user-index {
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: #fff;
  border-radius: 4px;
  background-color: #c0c4cc;
  margin-right: 30px;
  text-align: center;
}
.user-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.user-info {
  margin-left: 10px;
}
.user-name {
  font-size: 16px;
  color: #333;
}
.user-depart {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}
.user-time {
  flex-grow: 1;
  text-align: right;
  font-size: 16px;
  color: #333;
}
</style>
